<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">照护详情</block>
		</cu-custom>

		<!-- 顶部卡 -->
		<view class="padding-sm ">
			<view class="radius shadow shadow-lg bg-white det_top">
				<view class="detail">
					<view class="detail-img">
						<image src="../../../static/img/basics/u129.png"></image>
					</view>
					<view class="detail-right">
						<!-- top -->
						<view class="top">
							<view class="name">
								<text>{{item.oldManName}}</text>
								<text class="age">{{item.age}}岁</text>
							</view>
							<view>
								<view class='cu-tag round bg-orange'>{{item.abilityLevel}}</view>
								<view class='cu-tag round bg-blue' v-if="item.outStatus==0">外出</view>
							</view>
						</view>
						<!-- bot -->
						<view class="bot">
							<view class="left">
								<text>房间：</text>
								<text>{{item.roomName}}</text>
							</view>
							<view class="right">
								<text>床位：</text>
								<text>{{item.bedName}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部详情 -->
		<!-- 时间闹钟
		 -->
		<view class="current-top" v-if="serviceCycle==1" @click="readTime(serviceCycle)">
			<view class="current-img">
				<view class="current-img-inner">
					<image src="../../../static/u3764.png"></image>
					<text class="title">{{startTime}}-{{endTime}}</text>
				</view>
			</view>
		</view>
		<view class="current-top" v-if="serviceCycle==2" @click="readTime(serviceCycle)">
			<view class="current-img">
				<view class="current-img-inner">
					<image src="../../../static/u3764.png"></image>
					<text class="title">{{weekDay}}</text>
				</view>
			</view>
		</view>
		<view class="current-top" v-if="serviceCycle==3" @click="readTime(serviceCycle)">
			<view class="current-img">
				<view class="current-img-inner">
					<image src="../../../static/u3764.png"></image>
					<text class="title">{{startYueTime}}号-{{endYueTime}}号</text>
				</view>
			</view>
		</view>
		<!-- tab -->

		<view>
			<view>
				<checkbox-group>
					<view class="block" v-if="isHave">
						<view class="inner" v-for="(item,index) in needServiceList" :key="index">
							<view class="inner-center">
								<view @click="changeCheck(index,item)" class="block-item">
									<view class="position">
										<view class="position-inner">
											<label>
												<checkbox style="transform:scale(0.7)" class='round blue' :class="item.isChecked?'checked':''" :checked="item.isChecked?true:false"
												 value="C"></checkbox>
											</label>
										</view>
										<view class="instant-item-inner" style="" v-if="item.serviceItemIcon.mode=='local'||item.serviceItemIcon.mode=='sysIcon'">
											<image :src="item.serviceItemIcon.picUrl" mode=""></image>
											<!-- <view style="text-align: center;">{{item.serviceItemName}}</view>	 -->
										</view>
										<view v-if="item.serviceItemIcon.mode== 'diy'" class="position-inner-diy" style="font-size: 40rpx;color: #333333;"
										 :style="{color:item.serviceItemIcon.fontColor,background:item.serviceItemIcon.bacColor}">
											{{item.serviceItemIcon.word}}
										</view>

										<!-- <image :src="item" mode=""></image> -->
									</view>
								</view>
							</view>
							<view style="margin-top:12rpx;">
								{{item.serviceItemName}}
							</view>
						</view>
					</view>
					<view v-if="!isHave" class="no-data">
						暂无数据
					</view>
				</checkbox-group>
			</view>
			<view class="submit">
				<button type="primary" v-if="isButton" @click="submit(0)">提交</button>
				<button type="default" v-else>提交</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 月
				isButton: false,
				jsList: [],
				item: {},
				serviceCycle: '',
				startTime: '',
				endTime: '',
				curTime: [],
				needServiceList: [],
				isHave: true,
				weekDay: '',
				monthDayRange: [],
				startYueTime: '',
				endYueTime: ""
			}
		},
		onLoad(options) {
			this.item = JSON.parse(options.item)
			this.serviceCycle = JSON.parse(options.serviceCycle)
			if (JSON.parse(options.serviceCycle) == 1) {
				this.getCurTime();
			} else if (JSON.parse(options.serviceCycle) == 2) {
				this.getCurWeekDay();
			} else if (JSON.parse(options.serviceCycle) == 3) {
				this.getCurMonthDayRange();
			}
			this.getNeedServiceByObject();
		},
		methods: {
			readTime(serviceCycle) {
				switch (serviceCycle) {
					case 1:
						let time = this.startTime + '到' + this.endTime;
						if (this.$store.state.state && this.$store.state.isphone) {
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(time, 1);
						}
						break;
					case 2:
						if (this.$store.state.state && this.$store.state.isphone) {
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(this.weekDay, 1);
						}
						break;
					case 3:
						let yue = this.startYueTime + '号到' + this.endYueTime + '号'
						if (this.$store.state.state && this.$store.state.isphone) {
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(yue, 1);
						}
						break;
				}
			},
			// 获取当前时间
			getCurTime() {
				this.$http('/care-service/service/getCurTime', 'get').then(res => {
					if (res.data.code == 200) {
						this.curTime = res.data.data;
						this.startTime = this.curTime[0]
						this.endTime = this.curTime[1]
					}
				});
			},
			// GET /service/getCurMonthDayRange
			// 获取当前时间段
			getCurMonthDayRange() {
				this.$http('/care-service/service/getCurMonthDayRange', 'get').then(res => {
					if (res.data.code == 200) {
						// weekDay\
						this.startYueTime = res.data.data[0]
						this.endYueTime = res.data.data[1]
					}
				});
			},
			// GET /service/getCurWeekDay 获取当前是周几
			getCurWeekDay() {
				this.$http('/care-service/service/getCurWeekDay', 'get').then(res => {
					if (res.data.code == 200) {
						// weekDay\
						this.weekDay = res.data.data
					}
				});
			},
			// GET /service/getNeedServiceByObject
			// 获取待服务对象所有待服务项目(传serviceCycle,objectId
			getNeedServiceByObject() {
				let param = {}
				param.serviceCycle = this.serviceCycle
				param.objectId = this.item.oldBaseId
				this.$http('/care-service/service/getNeedServiceByObject', 'get', param).then(res => {
					if (res.data.code == 200) {
						this.needServiceList = res.data.data;
						for (let item of this.needServiceList) {
							if (item.serviceItemIcon == undefined) {
								this.isHave = false
							} else {
								this.isHave = true
								item.serviceItemIcon = JSON.parse(item.serviceItemIcon)
							}
						}
					}
				});
			},
			changeCheck(index, item) {
				this.needServiceList[index].isChecked = !this.needServiceList[index].isChecked
				if (this.needServiceList[index].isChecked) {
				if (this.$store.state.state && this.$store.state.isphone) {
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak( item.serviceItemName,1);
					}
					// switch (this.serviceCycle) {
					// 	case 1:
					// 		if (this.$store.state.state && this.$store.state.isphone) {
					// 			getApp().globalData.TTSSpeaker.stop();
					// 			getApp().globalData.TTSSpeaker.speak( item.serviceItemName,1);
					// 		}
					// 		break;
					// 	case 2:
					// 		if (this.$store.state.state && this.$store.state.isphone) {
					// 			getApp().globalData.TTSSpeaker.stop();
					// 			getApp().globalData.TTSSpeaker.speak('此服务项目为' + item.serviceItemName + '未完成，' + this.weekDay +
					// 				'前需完成该服务项目登记提交。', 1);
					// 		}
					// 		break;
					// 	case 3:
					// 		if (this.$store.state.state && this.$store.state.isphone) {
					// 			getApp().globalData.TTSSpeaker.stop();
					// 			getApp().globalData.TTSSpeaker.speak('此服务项目为' + item.serviceItemName + '未完成，' + this.endYueTime +
					// 				'号前需完成该服务项目登记提交。', 1);
					// 		}
					// 		break;
					// }
				}
				this.isButton = false
				this.totalCheck(this.needServiceList);
			},
			totalCheck(list) {
				const needServiceList = list;
				for (let i = 0; i < needServiceList.length; i++) {
					if (needServiceList[i].isChecked) {
						this.isButton = true
					}
				}
			},
			submit(index) {
				let data = this.needServiceList.filter(item => item.isChecked == true)
				for (let item = 0; item < data.length; item++) {
					if (typeof data[item].customItem == 'string') {
						data[item].serviceCycle = this.serviceCycle
						data[item].customItem = JSON.parse(data[item].customItem)
					}
					data[item].checked = true
					data[item].recordRemark = ''
					for (let it = 0; it < data[item].customItem.length; it++) {
						if (data[item].customItem[it].classify == '单选' && typeof data[item].customItem[it].value == 'object') {
							data[item].customItem[it].value = ''
						}
					}
				}
				uni.navigateTo({
					url: './cards?data=' + JSON.stringify(data) + '&item=' + JSON.stringify(this.item)
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.instant-item-inner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.cu-tag {
		height: 36rpx;
		margin: 0 15rpx;
	}

	.position-inner-diy {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	page {
		background-color: #FFFFFF;
	}

	.det_top {
		padding: 20rpx;
		padding-right: 4rpx;
	}

	.padding {
		padding: 20rpx;
	}

	.detail {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.detail-right {
			flex: 1;

			.name {
				padding-left: 10rpx;
				color: #666;
				font-size: 32rpx;
				margin-bottom: 10rpx;

				.age {
					margin-left: 40rpx;
					font-size: 28rpx;
				}
			}

			.top {
				border-bottom: 1rpx solid #CCCCCC;
				padding-bottom: 6rpx;
			}

			.bot {
				display: flex;
				font-size: 30rpx;
				margin-top: 12rpx;

				.left {
					flex: 1;
				}

				.right {
					flex: 1;
				}
			}
		}
	}

	.detail-img {
		margin-right: 20rpx;
		height: 100rpx;

		image {
			height: 100rpx;
			width: 100rpx;
		}
	}

	.tab {
		display: flex;
		margin: 20rpx 0;

		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 34rpx;
		}

		.text-rig {
			border-right: 1rpx solid #AAAAAA;
		}
	}

	.text-orange {
		font-weight: 700;
	}

	.block {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: center;
		background-color: #FFFFFF;

		.inner {
			margin: 30rpx 0;
			width: 250rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.inner-center {
				width: 60%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

			}

			.block-item {
				width: 170rpx;
				height: 170rpx;
				border-radius: 24rpx;
				border: 1rpx solid #CCCCCC;
				position: relative;

				image {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 100rpx;
					height: 100rpx;
				}
			}

			.position {
				height: 100%;
				width: 100%;

				.position-inner {
					position: absolute;
					top: -8rpx;
					right: -8rpx;
				}
			}
		}
	}
.submit{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9999;
		padding:30rpx;
		background-color: #FFFFFF;
		width: 100%;
		button{
			margin: 0 40rpx;
			height:80rpx;
		}
	}
	.tplan {
		display: flex;

		.left {
			flex: 1;

			.inner {
				text-align: center;
				height: 70rpx;
				line-height: 70rpx;
			}
		}

		.right {
			flex: 2;
		}
	}

	.rTime {
		background-color: #FFFFFF;
	}

	.current-top {
		display: flex;
		padding: 20rpx 30rpx;

		.current-img {
			flex: 1;

			.current-img-inner {
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				width: 260rpx;
				height: 60rpx;
				background-color: #0057A8;
				border-radius: 40rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 10rpx;
				}

				.title {
					color: #FFFFFF;
				}
			}
		}

		.current-right {
			image {
				width: 120rpx;
				height: 50rpx;
			}
		}
	}
</style>
